CSS Flexbox meistarība: uzlabota līdzināšana un sadalījums

Jau vairākus gadus CSS Flexbox ir bijis modernā tīmekļa izkārtojuma stūrakmens. Lielākā daļa izstrādātāju ir pieraduši izmantot display: flex, lai līdzinātu elementus rindā vai izveidotu vienkāršus centrētus komponentus. Tomēr patiesa Flexbox meistarība slēpjas tā niansētāko īpašību izpratnē, kas paredzētas uzlabotai līdzināšanai un dinamiskai sadalīšanai. Kad pārsniedzat justify-content: center un align-items: center pamatus, jūs atklājat spēju ar pārsteidzošu vieglumu radīt sarežģītus, adaptīvus un pēc būtības elastīgus izkārtojumus.

Šī rokasgrāmata ir paredzēta izstrādātājiem, kuri zina pamatus, bet vēlas padziļināt savu izpratni. Mēs izpētīsim īpašības, kas kontrolē vairāku rindu līdzināšanu, sarežģīto loģiku, kas nosaka, kā flex elementi palielinās un samazinās, un vairākus spēcīgus modeļus, kas risina bieži sastopamas izkārtojuma problēmas. Sagatavojieties kļūt no gadījuma lietotāja par pārliecinātu Flexbox arhitektu.

Pamats: ātrs atgādinājums par galveno un šķērsasi

Pirms iedziļināties sarežģītākās tēmās, ir ļoti svarīgi gūt stabilu izpratni par divām asīm, kas pārvalda katru flex konteineru. Visas līdzināšanas un sadalīšanas īpašības Flexbox darbojas gar vienu no šīm divām asīm.

• Galvenā ass: Tā ir primārā ass, pa kuru tiek izkārtoti flex elementi. Tās virzienu nosaka flex-direction īpašība.
• Šķērsass: Šī ass vienmēr ir perpendikulāra galvenajai asij.

Galvenais secinājums ir tāds, ka šīs asis nav statiskas. Tās pārorientējas, pamatojoties uz jūsu flex-direction vērtību:

• flex-direction: row (noklusējums): Galvenā ass ir horizontāla (no kreisās uz labo), un šķērsass ir vertikāla (no augšas uz leju).
• flex-direction: column: Galvenā ass kļūst vertikāla (no augšas uz leju), un šķērsass kļūst horizontāla (no kreisās uz labo).
• flex-direction: row-reverse: Galvenā ass ir horizontāla, bet virzās no labās uz kreiso.
• flex-direction: column-reverse: Galvenā ass ir vertikāla, bet virzās no apakšas uz augšu.

Šī pamatkoncepta aizmiršana ir lielākās daļas Flexbox neskaidrību avots. Pirms līdzināšanas īpašības piemērošanas vienmēr pajautājiet sev: "Kādā virzienā ir vērsta mana galvenā ass?"

Galvenās ass sadalījuma pārvaldīšana ar justify-content

Īpašība justify-content kontrolē, kā tiek sadalīta telpa starp un ap flex elementiem gar galveno asi. Lai gan flex-start, flex-end un center ir vienkārši saprotami, patiesais spēks slēpjas telpas sadalījuma vērtībās.

Padziļināts ieskats telpas sadalījumā

Noskaidrosim smalkās, bet būtiskās atšķirības starp space-between, space-around un space-evenly.

• justify-content: space-between;

  Šī vērtība vienmērīgi sadala elementus pa galveno asi. Pirmais elements tiek nospiests uz pašu konteinera sākumu, un pēdējais elements tiek nospiests uz pašu galu. Visa atlikusī telpa tiek vienādi sadalīta starp elementiem. Ārējās malās telpas nav.

  Lietošanas piemērs: Lieliski piemērots navigācijas joslām, kur vēlaties, lai logotips būtu galēji kreisajā pusē un saites – galēji labajā, ar vienmērīgu atstarpi starp saitēm.

• justify-content: space-around;

  Šī vērtība sadala elementus ar vienādu telpu ap katru elementu. Iedomājieties, ka katram elementam ir telpas "burbulis" gan kreisajā, gan labajā pusē. Kad blakus esošo elementu burbuļi saskaras, telpa starp tiem šķiet divreiz lielāka nekā telpa pie konteinera malām. Konkrētāk, telpa ārējās malās ir uz pusi mazāka nekā telpa starp elementiem.

  Lietošanas piemērs: Noderīgs karšu izkārtojumiem vai galerijām, kur vēlaties, lai elementiem būtu nedaudz brīvas vietas no konteinera malām, bet tie nebūtu pilnīgi piespiesti pie tām.

• justify-content: space-evenly;

  Šī ir visintuitīvākā no trim. Tā nodrošina, ka telpa starp jebkuriem diviem elementiem ir tieši tāda pati kā telpa starp pirmo/pēdējo elementu un konteinera malu. Katra atstarpe ir identiska.

  Lietošanas piemērs: Ideāli piemērots, ja nepieciešams pilnīgi līdzsvarots, simetrisks izkārtojums. Bieži vien tas ir tas, ko dizaineri netieši vēlas, lūdzot "vienmērīgu atstarpi".

Šķērsass līdzināšanas pārvaldīšana ar align-items un align-self

Kamēr justify-content pārvalda galveno asi, align-items pārvalda elementu noklusējuma līdzināšanu gar šķērsasi vienas rindas ietvaros.

align-items vērtību izpratne

• align-items: stretch; (noklusējums): Tas ir iemesls, kāpēc jūsu flex elementi bieži šķiet aizpildām sava konteinera augstumu, pat ja jūs to neprasāt. Elementi izstiepsies, lai aizpildītu konteinera izmēru gar šķērsasi (piemēram, augstumu flex-direction: row konteinerā).
• align-items: flex-start;: Elementi tiek sablīvēti šķērsass sākumā.
• align-items: flex-end;: Elementi tiek sablīvēti šķērsass beigās.
• align-items: center;: Elementi tiek centrēti gar šķērsasi.
• align-items: baseline;: Šī ir spēcīga un nepietiekami izmantota vērtība. Elementi tiek līdzināti tā, lai to teksta bāzes līnijas sakristu. Tas ir neticami noderīgi, ja jums ir elementi ar dažādiem fontu izmēriem (piemēram, galvenais virsraksts blakus apakšvirsrakstam) un vēlaties, lai tie līdzinātos tekstuāli, nevis tikai pēc to kastes robežām.

Pārrakstīšana ar align-self

Ko darīt, ja vēlaties, lai viens konkrēts elements uzvestos atšķirīgi no pārējiem? Šeit talkā nāk align-self. Piemērojot to atsevišķam flex elementam, tas pārraksta konteinera align-items īpašību tikai šim elementam. Tas pieņem visas tās pašas vērtības, ko align-items (plus `auto`, kas to atiestata uz konteinera vērtību).

Piemērs: Iedomājieties karšu rindu, kas visas centrētas ar align-items: center. Jūs varētu izcelt vienu "īpašo" karti, piemērojot tai align-self: stretch;, padarot to garāku par pārējām.

Nenovērtētais varonis: uzlabots sadalījums ar align-content

Šī, iespējams, ir visvairāk pārprastā īpašība Flexbox, un tās apgūšana ir uzlabotas prasmes pazīme. Biežs neskaidrību avots ir tās līdzība ar align-items.

Šeit ir kritiskais noteikums: align-content NAV EFEKTA, kad visi jūsu flex elementi atrodas vienā rindā. Tas darbojas tikai tad, ja jums ir daudzrindu flex konteiners (t.i., jūs esat iestatījis flex-wrap: wrap; un elementi ir faktiski pārcēlušies uz jaunām rindām).

Padomājiet par to šādi:

• align-items līdzina elementus to rindas ietvaros.
• align-content līdzina pašas rindas konteinera ietvaros. Tas kontrolē telpas sadalījumu šķērsasī starp elementu rindām.

Būtībā tas darbojas kā justify-content, bet attiecībā uz šķērsasi. Tā vērtības ir gandrīz identiskas:

• align-content: flex-start; (noklusējums): Visas rindas tiek sablīvētas konteinera sākumā.
• align-content: flex-end;: Visas rindas tiek sablīvētas beigās.
• align-content: center;: Visas rindas tiek sablīvētas centrā.
• align-content: space-between;: Pirmā rinda ir sākumā, pēdējā rinda ir beigās, un telpa tiek vienmērīgi sadalīta starp rindām.
• align-content: space-around;: Vienāda telpa tiek novietota ap katru rindu.
• align-content: space-evenly;: Atstarpe starp katru rindu ir identiska.
• align-content: stretch;: Rindas izstiepjas, lai aizņemtu atlikušo telpu.

Lietošanas piemērs: Iedomājieties foto galeriju, kur elementi tiek aplauzti. Ja konteineram ir fiksēts augstums, var palikt pāri papildu vertikālā telpa. Pēc noklusējuma šī telpa parādās apakšā. Izmantojot align-content: space-between; vai align-content: center;, jūs varat kontrolēt visa fotoattēlu režģa vertikālo sadalījumu, radot daudz profesionālāku izskatu.

Dinamiska izmēru noteikšana un sadalīšana: flex saīsinājums

Statiski izkārtojumi ir reti. Patiesais Flexbox spēks nāk no tā spējas tikt galā ar dinamisku saturu un pieejamo telpu. To kontrolē trīs īpašības, kuras bieži iestata ar flex saīsinājumu: flex-grow, flex-shrink un flex-basis.

1. flex-basis: sākumpunkts

Pirms jebkādas palielināšanas vai samazināšanas, Flexbox ir nepieciešams sākuma izmērs katram elementam. Tas ir flex-basis uzdevums. Tas definē elementa noklusējuma izmēru gar galveno asi.

• Ja iestatīts uz konkrētu garumu (piem., 200px vai 10rem), tas kļūst par elementa sākotnējo izmēru.
• Ja iestatīts uz auto, tas meklē `width` vai `height` īpašību elementam. Ja tādas nav, tas nosaka izmēru, pamatojoties uz elementa saturu.
• Ja iestatīts uz 0, elementam nav sākuma izmēra, un tā galīgais izmērs tiek noteikts tikai pēc tā flex-grow proporcijas.

Labākā prakse: Bieži vien ir labāk izmantot flex-basis, nevis `width` flex kontekstā, jo tas skaidrāk definē elementa izmēru galvenās ass kontekstā.

2. flex-grow: pozitīvās telpas patērēšana

Kad flex konteineram ir papildu telpa gar tā galveno asi, flex-grow nosaka, kā šī telpa tiek sadalīta. Tā ir proporcija bez mērvienības.

• Noklusējuma vērtība ir 0, kas nozīmē, ka elementi nepalielināsies, lai aizpildītu papildu telpu.
• Ja visiem elementiem ir flex-grow: 1, papildu telpa tiek sadalīta vienādi starp tiem.
• Ja vienam elementam ir flex-grow: 2 un citam ir flex-grow: 1, pirmais elements saņems divreiz vairāk papildu telpas nekā otrais.

3. flex-shrink: negatīvās telpas (pārplūdes) apstrāde

Šis ir flex-grow pretstats. Kad konteinerā nav pietiekami daudz vietas, lai ietilpinātu visus elementus to flex-basis izmērā, tiem ir jāsamazinās. flex-shrink kontrolē, cik daudz tie samazinās.

• Noklusējuma vērtība ir 1, kas nozīmē, ka visi elementi pēc noklusējuma samazinās proporcionāli, lai novērstu pārplūdi.
• Ja elementam iestatāt flex-shrink: 0, tas nesamazināsies. Tas saglabās savu flex-basis izmēru, potenciāli izraisot konteinera pārplūdi. Tas ir noderīgi tādiem elementiem kā logotipi vai pogas, kuras nekad nevajadzētu saspiest.

flex saīsinājums: saliekot visu kopā

Īpašība flex ir saīsinājums flex-grow, flex-shrink un flex-basis, šādā secībā.

• flex: 0 1 auto; (noklusējums): Elements nevar palielināties, var samazināties, un tā bāzes izmērs tiek noteikts pēc tā platuma/augstuma vai satura.
• flex: 1; (saīsinājums no flex: 1 1 0;): Ļoti izplatīta vērtība. Elements var palielināties un samazināties, un tā sākuma izmērs ir 0. Tas efektīvi liek elementiem dalīt telpu, pamatojoties tikai uz to flex-grow proporciju.
• flex: auto; (saīsinājums no flex: 1 1 auto;): Elements var palielināties un samazināties, un tā bāzes izmērs tiek noteikts pēc tā satura. Tas ļauj elementiem būt dažāda izmēra, pamatojoties uz to saturu, bet joprojām elastīgi absorbēt papildu telpu.
• flex: none; (saīsinājums no flex: 0 0 auto;): Elements ir pilnīgi neelastīgs. Tas nevar ne palielināties, ne samazināties.

Praktiski lietošanas piemēri un uzlaboti scenāriji

1. scenārijs: Līpošā kājene

Klasiska tīmekļa dizaina problēma: kā panākt, lai kājene pieliptu pie lapas apakšas, pat ja saturs ir īss, bet tiek dabiski nospiesta uz leju, kad saturs ir garš.

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Viewport Height */
}

.main-content {
  flex-grow: 1; /* or flex: 1; */
}

Padarot galveno lapas konteineru par kolonnu bāzētu flexbox un iestatot galvenās satura zonas flex-grow: 1, mēs liekam tai patērēt visu pieejamo vertikālo telpu, nospiežot kājeni uz leju līdz skatloga apakšai.

2. scenārijs: Automātiskās atkāpes grupu sadalīšanai

Kā izveidot navigācijas joslu ar logotipu galēji kreisajā pusē un saišu grupu galēji labajā pusē? Lai gan justify-content: space-between darbojas, ja logotips ir viens flex elements, ko darīt, ja labajā pusē ir vairāki elementi?

Risinājums ir automātisko atkāpju maģija Flexbox.

.navbar {
  display: flex;
}

.logo {
  /* No special properties needed */
}

.nav-links {
  margin-left: auto;
}

Flex konteinerā automātiskā atkāpe rijīgi patērēs visu pieejamo telpu virzienā, kurā tā tiek piemērota. Iestatot margin-left: auto navigācijas saišu grupai, tas rada elastīgu, tukšu telpu starp logotipu un saitēm, nospiežot saites līdz pat labajai malai.

3. scenārijs: Mediju objekts

Bieži sastopams lietotāja saskarnes modelis, kurā attēls vai ikona atrodas vienā pusē un aprakstošs teksts otrā. Tekstam vajadzētu aizņemt visu atlikušo telpu un graciozi aplūzt.

.media-object {
  display: flex;
  align-items: flex-start; /* Aligns image and text to the top */
}

.media-image {
  margin-right: 1rem;
  flex-shrink: 0; /* Prevents the image from being squished */
}

.media-body {
  flex-grow: 1; /* Takes up all remaining horizontal space */
}

Šeit galvenais ir flex-grow: 1 teksta konteineram. Tas nodrošina, ka neatkarīgi no attēla platuma, teksta daļa paplašināsies, lai aizpildītu pārējo pieejamo platumu konteinerā.

Secinājums: Tālāk par līdzināšanu, virzībā uz apzinātu izkārtojumu

Apgūt Flexbox nozīmē pārsniegt vienkāršu lietu centrēšanu. Tas ir par asu mijiedarbības izpratni, telpas sadalīšanas loģiku un elementu izmēru elastību. Iegūstot stabilu izpratni par align-content daudzrindu izkārtojumiem, flex saīsinājumu dinamiskai izmēru noteikšanai un tādiem spēcīgiem modeļiem kā automātiskās atkāpes, jūs varat veidot izkārtojumus, kas ir ne tikai vizuāli pievilcīgi, bet arī robusti, adaptīvi un semantiski tīri.

Nākamreiz, saskaroties ar sarežģītu izkārtojuma izaicinājumu, atturieties no vēlmes ķerties pie pludināšanas (floats) vai sarežģītiem pozicionēšanas risinājumiem. Tā vietā pajautājiet sev: Vai to var atrisināt ar apzinātu telpas sadalījumu? Atbilde, biežāk nekā nē, tiks atrasta CSS Flexbox uzlabotajās iespējās.